﻿<template>
  <div class="details-btns-action">
    <span class="title">订单操作</span>
    <div class="btn-group">
      <el-button
        v-for="(btn, index) in actionButtons"
        :key="index"
        :type="btn.type"
        :size="btn.size"
        :class="btn.class"
        @click="handleButtonClick(btn.action)"
      >
        {{ btn.label }}
      </el-button>
    </div>
  </div>
</template>

<script setup>
  const actionButtons = ref([
    { label: "发货", type: "primary", size: "default", action: "ship" },
    { label: "修改收货信息", type: "default", size: "default", class: "secondary-btn", action: "modify-receipt" },
    { label: "修改押金", type: "default", size: "default", class: "secondary-btn", action: "modify-deposit" },
    { label: "备注", type: "default", size: "default", class: "secondary-btn", action: "remark" },
    { label: "关闭订单", type: "default", size: "default", action: "close-order" },
    { label: "详细资料", type: "default", size: "default", action: "details" },
    { label: "更多", type: "default", size: "default", action: "more" },
  ]);

  const handleButtonClick = action => {
    console.log("点击按钮:", action);
    // 根据 action 执行相应操作
  };
</script>
<style lang="scss" scoped>
  :deep(.base-card .card-header) {
    padding: 0;
  }

  .details-btns-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 24px 0;

    .title {
      font-size: 14px;
      color: var(--ct1);
    }

    .btn-group {
      display: flex;
    }

    :deep(.secondary-btn) {
      background-color: var(--bg);
      border-color: var(--bd);
      color: var(--bd);

      &:hover {
        background-color: var(--bd9);
        border-color: var(--bd3);
      }
    }
  }
</style>
